<template>
  <div ref="refSlotContainer" >
    <slot :maxHeight="tableMaxHeight"></slot>
  </div>
</template>
<script >
import lodash from "lodash"
export default{
  data(){
    return {
      //表格高度
      tableMaxHeight: 0,
      //不必要的高度
      unNecessaryHeight:200,
      clientHeight:0,
    }
  },

  mounted () {
    this.clientHeight = document.body.clientHeight
    this.$nextTick(() => {
      this.computerBottom()
      this.tableMaxHeight = this.clientHeight - this.unNecessaryHeight
    })
    window.onresize = () => {
      return (() => {
        this.clientHeight = document.body.clientHeight
      })()
    }
  },
  watch: {
    clientHeight: {
      handler: function (currentHeight) {
        this.setTableMaxHeight(currentHeight)
      },
      immediate: true,
      deep:true
    },
  },

  methods:{
    setTableMaxHeight: lodash.debounce(function(currentHeight){
      if(currentHeight > this.unNecessaryHeight){
        this.tableMaxHeight = currentHeight - this.unNecessaryHeight
      }
    },40),
    computerBottom () {
      let node = this.$refs.refSlotContainer
      let tmp = 0
      while (node != null) {
        tmp += node.offsetTop;
        node = node.offsetParent;
      }
      this.unNecessaryHeight = tmp
    }
  }
}
</script>
<style></style>
